
$headSize: 60px;
$menuWidth: 275px;
$oprWidth:275px;
$primary: blue;
$border: gray;
.visible-editor {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: white;
    &::before{
        position: fixed;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(black,0.1);
    }
    & > .visible-editor-menu{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: $menuWidth;
        background-color: white;
        z-index: 10;
        &> .visible-editor-menu-item {
            position: relative;
            width: calc(100%-20px);
            min-height: 120px;
            margin-top: 20px;
            padding: 4px 8px;
            border: 3px solid $border;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            &> .visible-editor-menu-item-label {
                position: absolute;
                left: 0;
                top: 0;
                background-color: $primary;
                color: white;
            }
            &:after {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                content: '';
            }
            &:hover {
                border-color: $primary;
                cursor: move;
            }
            // &> .visible-editor-menu-item-content {
            //     position: absolute;
            //     left: 0;
            //     top: 0;
            // }
            
        }
    }
    & > .visible-editor-opr{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: $oprWidth;
        background-color: white;
    }
    & > .visible-editor-head{
        position: absolute;
        top: 0;
        left: $menuWidth;
        right: $oprWidth;
        height: $headSize;
        // background-color: blue;
    }
    & > .visible-editor-body{
        padding-top: $headSize;
        padding-left: $menuWidth;
        padding-right: $oprWidth;
        height: 100%;
        box-sizing: border-box;  // 为什么有这行代码就不一样
        background-color: rgba(white, 0.5);
        position: relative; // 为什么有这两行代码就不一样，position z-index;
        z-index: 9;
        & > .visible-editor-content {
            width: 100%;
            height: 100%;
            // overflow: scroll;
            display: flex;
            justify-content: center;
            // align-items: center;
            & > .visible-editor-container {
                background-color: white;
                flex-shrink: 0;
                flex-grow: 0;
                position: relative;
                & > .visible-editor-block {
                    position: absolute;
                }
            }
        }
    }
}